<!-- 模态基础组件 -->
 <!-- components/ui/ModalDialog.vue -->
<template>
    <teleport to="body">
      <transition name="modal-fade">
        <div 
          v-show="modelValue"
          class="fixed inset-0 z-50 overflow-y-auto"
          @click.self="handleOutsideClick"
        >
          <!-- 遮罩层 -->
          <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
  
          <!-- 模态框主体 -->
          <div class="min-h-screen flex items-center justify-center p-4">
            <div 
              class="bg-white rounded-xl shadow-xl w-full max-w-2xl transform transition-all"
              :class="contentClass"
            >
              <!-- 头部 -->
              <div class="flex justify-between items-center p-6 border-b">
                <h3 class="text-xl font-semibold">
                  {{ title }}
                </h3>
                <button 
                  v-if="showClose"
                  @click="closeModal"
                  class="text-gray-500 hover:text-gray-700 transition-colors"
                >
                  <font-awesome-icon icon="times" class="text-2xl" />
                </button>
              </div>
  
              <!-- 内容区 -->
              <div class="p-6 overflow-y-auto max-h-[70vh]">
                <slot>
                  <div v-if="content" class="prose" v-html="content"></div>
                </slot>
              </div>
  
              <!-- 底部操作区 -->
              <div v-if="$slots.footer" class="p-6 border-t">
                <slot name="footer"></slot>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </teleport>
  </template>
  
  <script setup lang="ts">
  import { watchEffect, onMounted, onBeforeUnmount } from 'vue'
  
  const props = defineProps({
    modelValue: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    },
    closeOnClickOutside: {
      type: Boolean,
      default: true
    },
    closeOnEsc: {
      type: Boolean,
      default: true
    },
    contentClass: {
      type: String,
      default: ''
    }
  })
  
  const emit = defineEmits(['update:modelValue', 'closed'])
  
  // 处理键盘事件
  const handleKeydown = (e: KeyboardEvent) => {
    if (props.closeOnEsc && e.key === 'Escape') {
      closeModal()
    }
  }
  
  // 关闭模态框
  const closeModal = () => {
    emit('update:modelValue', false)
    emit('closed')
  }
  
  // 点击外部关闭
  const handleOutsideClick = () => {
    if (props.closeOnClickOutside) {
      closeModal()
    }
  }
  
  // 生命周期钩子
  onMounted(() => {
    document.addEventListener('keydown', handleKeydown)
  })
  
  onBeforeUnmount(() => {
    document.removeEventListener('keydown', handleKeydown)
  })
  
  // 禁止背景滚动
  watchEffect(() => {
    if (props.modelValue) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
  })
  </script>
  
  <style scoped>
  .modal-fade-enter-active,
  .modal-fade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .modal-fade-enter-from,
  .modal-fade-leave-to {
    opacity: 0;
  }
  
  .modal-fade-enter-active .transform,
  .modal-fade-leave-active .transform {
    transition: all 0.3s ease;
  }
  
  .modal-fade-enter-from .transform,
  .modal-fade-leave-to .transform {
    opacity: 0;
    transform: translateY(-20px);
  }
  </style>